
<template>
    <div class="login-container">
      <el-card class="login-card">
        <h1 class="login-title">用户登陆</h1>
        <el-form :model="form" :rules="rules" ref="form" label-position="left" label-width="80px" class="login-form">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login-button" @click="handleLogin">登陆</el-button>
            <el-button type="success" class="register-button" @click="$router.push('/register')">注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
      
  </template>
  
  <script>
import router from '@/router';

  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
        }
      };
    },
    methods: {
      handleLogin() {
        this.$refs.form.validate(valid => {
          if (valid) {
            let params = {}
            params.username = this.form.username
            params.password = this.form.password
            this.$http.get("/login",{params}).then(res=>{
                if(res.data==="账号未注册&用户名或密码错误"){
                  this.$message.error("账号未注册&用户名或密码错误")
                } else
                {
                  this.$router.push("/user")
                  this.$message.success("登录成功")
                }
            })
          }
        });
      },
    }
  };
  </script>
  
  <style>
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 使容器占据全屏高度 */
    background-color: #f0f0f0; /* 背景色，根据需要调整 */
  }

    .login-card {
      width: 450px; /* 设定卡片宽度 */
      border-radius: 10px; /* 圆角 */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
      overflow: hidden; /* 隐藏溢出内容 */
      background-color: #fff; /* 背景色 */
      padding: 20px; /* 内边距 */
    }
  .login-title {
    text-align: center; /* 标题居中 */
    margin-bottom: 20px; /* 标题与表单项之间的间距 */
  }
  .login-form {
    margin-bottom: 20px; /* 表单底部间距 */
  }
  .login-button {
    width: 150px; /* 按钮宽度占满其父元素 */
    margin-top: 10px; /* 按钮上方的间距 */
  }
  .register-button {
    width: 150px; /* 按钮宽度占满其父元素 */
    margin-top: 10px;
  }

</style>